<!--
 * @Author: yuanjunyi
 * @Date: 2024-02-23 14:33:26
 * @LastEditors: yuanjunyi
 * @LastEditTime: 2024-04-19 17:24:54
 * @Description: this is description
-->
<template>
  <div class="banner">
    <div class="banner-title">
      <h2>匠才宝</h2>
      <h5>钢结构垂直行业中高端工匠级专属招工用工平台</h5>
      <h5>实现新工匠高质量就业和钢结构产业高质量发展双赢</h5>
      <div><span @click="show = true">开始体验</span></div>
    </div>
    <img :src="imgUrl + 'artisan-bg.png'" alt="" />
  </div>
  <div class="part">
    <div class="part-title">
      <div>行业痛点</div>
      <p>您的企业，是否面临如下用工挑战？</p>
    </div>
    <ul>
      <li v-for="(el, i) in arrData" :key="i">
        <img :src="el.img" alt="" />
        <div>{{ el.title }}</div>
        <p v-for="(a, b) in el.text" :key="b">{{ a }}</p>
      </li>
    </ul>
    <div class="part-title">
      <div>解决方案</div>
      <p>
        通过平台精准定位行业蓝领工匠、生产技术人员，持续采集、更新工人业绩数据，提高企业与行业工匠的匹配效率与匹配度
      </p>
    </div>
  </div>
  <div
    class="part-problem"
    :style="`background: url(${imgUrl}artisan-solve.png) no-repeat center center; background-size: cover;`"
  ></div>
  <div class="part">
    <div class="part-title">
      <div>钢结构垂直行业中高端工匠级专属招工用工平台</div>
      <p>平台对产业新工匠、劳务公司及生态伙伴双向赋能，形成复合赛道</p>
    </div>
    <div class="platform-box">
      <img :src="`${imgUrl}artisan-pt.png`" alt="" />
      <div>
        <div>
          <div class="title">专注于钢结构行业</div>
          <div class="text-content">
            <p>专注于钢结构行业蓝领工匠及专业技术人才的招工、找活平台；</p>
            <p>不断引进及培育行业新工匠，提升行业人才整体素质，</p>
            <p>加大行业“工匠资源池”。</p>
          </div>
        </div>
        <div>
          <div class="title">双向的评价机制</div>
          <div class="text-content">
            <p>科学的工匠评价机制，精准推送高匹配度人才 。</p>
            <p>持续的绩效跟进，从招聘用工切入，提供技能培训、劳动保障、</p>
            <p>生产派工等配套服务。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="part">
    <div class="part-title">
      <div>工匠来源</div>
      <p>为高技能人才持续不断提供找活服务，使其获得最大价值</p>
    </div>
    <ul class="artisan-source">
      <li>
        <div class="title">钢结构公司</div>
        <p>30家钢结构基石客户现有劳务工人</p>
      </li>
      <li>
        <div class="title">行业协会</div>
        <p>200家钢结构会员企业工人</p>
      </li>
      <li>
        <div class="title">高、中职院校</div>
        <p>每年10个订单班培养向行业持续输入新工匠</p>
      </li>
      <li>
        <div class="title">人力资源公司</div>
        <p>对接全国30家人力资源公司已有劳务资源</p>
      </li>
      <img :src="`${imgUrl}artisan-ball.png`" alt="" />
    </ul>
  </div>

  <div>
    <div class="part-title" style="margin-top: 60px">
      <div>匠才宝四大优势</div>
      <p>构建“育选用”贯通的工匠型产业工人培育体系和技能生态以及用工服务体系</p>
    </div>
    <four-advantages :advantageDate="advantageDate" />
  </div>
  <access-services-dialog
    v-model="show"
    @close="show = !show"
    @handleConfirm="handleConfirm"
  />
  <service-telephone-dialog v-model="show1" @close="show1 = !show1" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { arrData, brightSpotArray, advantageDate } from "./constants";
import AccessServicesDialog from "@/components/access-services-dialog/index.vue";
import ServiceTelephoneDialog from "@/components/service-telephone-dialog/index.vue";
import { imgUrl } from "@/utils/common";
// import fourAdvantages from "@/views/ecological-services/artisan-talent/components/four-advantages.vue";
import fourAdvantages from "../components/four-advantages .vue";

const show = ref(false);
const show1 = ref(false);
const handleConfirm = () => {
  show.value = false;
  show1.value = true;
};
</script>

<style scoped lang="scss">
.banner {
  position: relative;
  .banner-title {
    position: absolute;
    top: 53%;
    left: 31.5%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    text-align: left;
    h2 {
      font-weight: bold;
      font-size: 60px;
      margin-bottom: 15px;
    }
    h3 {
      font-weight: 600;
      font-size: 30px;
      margin-bottom: 20px;
    }
    h5 {
      font-weight: 400;
      font-size: 24px;
      margin-bottom: 20px;
    }
    p {
      display: inline-block;
      padding: 12px 16px;
      background: #809bc0;
      border-radius: 3px;
      font-size: 16px;
      line-height: 24px;
    }
    div {
      margin-top: 67px;
      span {
        cursor: pointer;
        display: inline-block;
        padding: 12px 50px;
        background-color: #fff;
        color: #1678ff;
        border-radius: 3px;
        font-weight: 400;
        font-size: 20px;
      }
    }
  }
  img {
    width: 100%;
    height: 100%;
  }
}
/* .part {
    height: 717px;
  } */
ul {
  display: flex;
  /* width: calc(100% - 640px); */
  width: 66.7%;
  margin: 20px auto 100px;
  justify-content: space-around;

  li {
    /* width: 250px; */
    /* background-color: #ebecf0; */

    img {
      width: 65px;
      height: 65px;
      margin-bottom: 16px;
    }
    div {
      font-size: 20px;
      line-height: 30px;
    }
    p {
      font-weight: 400;
      font-size: 14px;
      color: #7a869a;
      line-height: 28px;
    }
  }
}
.part-problem {
  height: 667px;
}
.btn-tabs {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-around;
}
.sim-button {
  text-align: center;

  cursor: pointer;
  padding: 8px 24px;
  background-color: #f4f4f4;
  border-radius: 3px;
  /* color: rgba(255, 255, 255, 1); */
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
}
.button2 {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}
.button2:hover {
  background-color: #1678ff;
  color: #fff;
}
.button2 > span {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.button2:hover > span {
  opacity: 0;
}
.button2::after {
  content: attr(data-text);
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50px;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #fff;
}
.button2:hover::after {
  left: 0;
  opacity: 1;
}
.sim-button__active {
  background-color: #1678ff;
  color: #fff;
}
/* 产品两点tip */
/* .banner-tip {
    position: absolute;
  } */
:deep(.el-carousel__container) {
  height: 702px;
}
:deep(.el-carousel__indicators--outside button) {
  /* background-color: var(--el-carousel-indicator-out-color); */
  opacity: 1;
  background: #ebecf0;
  width: 90px;
  height: 6px;
  border-radius: 4px;
}
:deep(.el-carousel__indicator.is-active button) {
  background-color: #1678ff;
}
.platform-box {
  width: 66.7%;
  margin: auto;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  img {
    width: 50%;
    /* margin-right: 84px; */
  }
  > div {
    padding-top: 44px;
    > div {
      margin-bottom: 39px;
      .title {
        font-weight: 600;
        font-size: 18px;
        color: #1678ff;
        margin-bottom: 14px;
        &::before {
          content: "";
          display: inline-block;

          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #1678ff;
          margin-right: 17px;
        }
      }
      .text-content {
        padding-left: 28px;
        p {
          font-weight: 400;
          font-size: 14px;
          color: #7a869a;
          line-height: 24px;
        }
      }
    }
  }
}
.artisan-source {
  width: 66.7%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  li {
    width: calc(50% - 24px);
    background: #f1f7ff;
    height: 198px;
    margin: 0 24px 24px 0;
    padding: 40px 70px;
    &:nth-of-type(2n) {
      margin-right: 0;
    }
    .title {
      width: 219px;
      height: 47px;
      border-radius: 30px;

      line-height: 47px;
      font-weight: 600;
      font-size: 20px;
      color: #1678ff;
    }
    p {
      font-weight: 400;
      font-size: 16px;
      color: #7a869a;
      margin-top: 16px;
      margin-left: 15px;
    }
    &:nth-of-type(2n-1) {
      .title {
        background: linear-gradient(
          90deg,
          #accfff 0%,
          rgba(229, 240, 255, 0) 100%
        );
        padding-left: 34px;
      }
      p {
        &::before {
          content: "";
          display: inline-block;
          width: 8px;
          height: 8px;
          vertical-align: middle;
          border-radius: 50%;
          background-color: #7a869a;
          margin-right: 8px;
        }
      }
    }
    &:nth-of-type(2n) {
      text-align: right;
      .title {
        /* float: right; */
        margin-right: -5px;
        background: linear-gradient(
          90deg,
          rgba(229, 240, 255, 0) 0%,
          #accfff 100%
        );
        padding-right: 34px;
        margin-left: calc(100% - 219px);
      }
      p {
        margin-right: 15px;
        &::after {
          content: "";
          display: inline-block;
          vertical-align: middle;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #7a869a;
          margin-left: 8px;
        }
      }
    }
  }
  img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.part-title {
  margin-top: 100px;
}
</style>
